<template>
	<div class="yh_content">
		<div class="yh_topsearch yh_dis yh_disJub" style="border: none; padding: 0px;">
			<div class="dis">
				<div class="mar-right10">
					<div class="foSi12 hei20" style="color: #787878;">开班时间</div>
					<div class="dis disAl">
						<el-date-picker size="small" v-model="search.start" style="width: 140px;" type="date"
							placeholder="开始时间" />
						<el-date-picker size="small" v-model="search.end" class="mar-left10" style="width: 140px;"
							type="date" placeholder="截止时间" />
					</div>
				</div>
				<div class="mar-right10">
					<div class="foSi12 hei20" style="color: #787878;">状态</div>
					<el-select v-model="search.state" style="width: 140px" size="small">
						<el-option v-for="(item,index) in search.stateList" :key="index" :label="item.label"
							:value="item.value" />
					</el-select>
				</div>
				<div class="mar-right10">
					<div class="foSi12 hei20" style="color: #787878;">班级名称</div>
					<el-input v-model="search.name" size="small" style="width: 140px;" placeholder="班级名称" />
				</div>
				<div>
					<el-button type="primary" size="small" @click.stop="getSuosou" class="mar-top20 bac6b7">搜索</el-button>
				</div>
			</div>
			<div>
				<el-button type="primary" size="small" class="mar-top20 bac6b7" @click.stop="add">新增班级</el-button>
			</div>
		</div>
		<div style="margin-top: 20px">
			<el-table :data="tableData" v-loading="listLoading" stripe style="width: 100%">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100" />
					</div>
					<div class="title">暂无数据</div>
				</div>
				<el-table-column label="班级封面" width="160">
					<template slot-scope="scope">
						<div class="hei86" style="width: 140px;">
							<img :src="scope.row.cover" class="wh100">
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="班级名称	" />
				<el-table-column prop="money" label="售价	" />
				<el-table-column prop="money" label="教练" />
				<el-table-column label="当前人数/上限">
					<template slot-scope="scope">
						<div class="dis disAl">{{ scope.row.people }}/{{ scope.row.max_people }}</div>
					</template>
				</el-table-column>
				<el-table-column label="已上课/排课">
					<template slot-scope="scope">
						<div class="dis disAl">{{ scope.row.ysk }}/{{ scope.row.pk }}</div>
					</template>
				</el-table-column>
				<el-table-column label="状态	">
					<template slot-scope="scope">
						<div class="dis disAl">{{ scope.row.status===1?'上架':'下架' }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="date" label="开课时间" >
          <template slot-scope="scope">
            <div class="dis disAl">{{ scope.row.start_time }}</div>
          </template>
        </el-table-column>
				<el-table-column prop="date" label="结课时间" >
          <template slot-scope="scope">
            <div class="dis disAl">{{ scope.row.end_time }}</div>
          </template>
        </el-table-column>
				<el-table-column label="操作" width="200">
					<template slot-scope="scope">
						<div class="dis disAl flwa">
							<div class="dis disAl mar-right10 cuPo mar-bott5" @click="xiangqing(scope.row.id)">
								<i class="el-icon-document" style="color: rgb(25, 165, 88); font-size: 20px" />详情
							</div>
							<div class="dis disAl mar-right10 mar-bott5" v-if="scope.row.status !== 1">
								<i class="el-icon-document" style="color: #999; font-size: 20px" />报班
							</div>
							<div class="dis disAl mar-right10 cuPo mar-bott5" v-else @click="baoban(scope.row.id)">
								<i class="el-icon-document" style="color: #41c3a8; font-size: 20px" />报班
							</div>
							<div class="dis disAl mar-right10 cuPo mar-bott5" @click="sxjia(scope.row.id,scope.row.status)">
								<svg-icon v-if="scope.row.status===1" icon-class="xiajia" class="mar0"
									style="width: 20px;height: 20px;fill: #41c3a8;" />
                <svg-icon v-if="scope.row.status!==1" icon-class="shangjia" class="mar0"
                          style="width: 20px;height: 20px;fill: #41c3a8;" />
                {{ scope.row.status===1?'下架':'上架' }}
							</div>
<!--							<div class="dis disAl mar-right10 cuPo">-->
<!--								<i class="el-icon-link" style="color: rgb(25, 165, 88); font-size: 20px" />推广-->
<!--							</div>-->
							<div class="dis disAl mar-right10 cuPo" @click="edit(scope.row.id)">
								<svg-icon icon-class="bianji" class="mar0"
									style="width: 20px;height: 20px;fill: #41c3a8;" />编辑
							</div>
<!--							<div class="dis disAl mar-right10 cuPo">-->
<!--								<i class="el-icon-chat-dot-round" style="color: rgb(25, 165, 88); font-size: 20px" />更多-->
<!--							</div>-->
						</div>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>
    <div v-if="baoban_isset" class="zhezhao wh100"></div>
    <div v-if="baoban_isset" class="zhezhaoN dis disAl disJuC wh100">
      <el-scrollbar wrap-class="scrollbar-wrapper poRel borRad10 bacFFF zhezhaoWH" style="width: 962px;">
        <div class="wid90 mar">
          <div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;border-bottom: 1px solid #d9d9d9;">
            <div class="dis disAl">
              <div class="foSi20 fowe600 mar-right10">报班</div>
            </div>
          </div>
          <div class="mar-top20">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
              <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                  <div class="dis disAl">
                    <span class="mar-right5" style="color: #FF0000;">*</span>
                    <span>手机</span>
                  </div>
                  <div class="dis disAl">
                    <el-form-item class="mp0" prop="tel">
                      <el-input v-model="baobanForm.tel" style="width: 140px;" @input="gettel"
                                placeholder="请填写手机号码" />
                    </el-form-item>
                    <div v-if="nameVisible" class="poAbs nameSuo">
                      <div
                        v-for="(item,index) in nameList"
                        :key="index"
                        class="suosouText foSi14"
                        @click.stop="nameClick(index)"
                      >
                        {{ item.realname?item.realname:item.nickname }}/{{item.tel}})
                      </div>
                    </div>
                  </div>
                </div>
                <div class="hei100 item-p item-w dis disAl disJuB">
                  <div class="dis disAl">
                    <span class="mar-right5" style="color: #FF0000;">*</span>
                    <div>姓名</div>
                  </div>
                  <div class="dis disAl">
                    <el-form-item class="mp0" prop="realname">
                      <el-input v-model="baobanForm.realname" style="width: 140px;"
                                placeholder="请填写姓名" />
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                  <div class="dis disAl">
                    <span>生日</span>
                  </div>
                  <div class="dis disAl">
                    <el-date-picker v-model="baobanForm.birthday" style="width: 140px;"
                                    value-format="yyyy-MM-dd"  type="date" />
                  </div>
                </div>
                <div class="hei100 item-p item-w dis disAl disJuB">
                  <div>
                    <span class="foSi10" style="color: #ff0000;margin-right: 4px;">*</span>
                    <span>班级</span>
                  </div>
                  <div class="dis disAl">
                    {{classInfo.name}}
                  </div>
                </div>
              </div>
              <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                  <div class="dis disAl">班级课时</div>
                  {{classInfo.class_hours}}
                </div>
                <div class="hei100 item-p item-w dis disAl disJuB">
                  <div class="dis disAl">
                    <span class="mar-right5" style="color: #FF0000;">*</span>
                    <span>实际课时</span>
                  </div>
                  <el-form-item class="mp0" prop="kcTime">
                    <el-input v-model="baobanForm.class_hour" style="width: 140px;"
                              placeholder="请输入课时数" />
                  </el-form-item>
                </div>
              </div>
              <div class="wid100 item-l hei44 mar-bott10 dis disAl ">
                <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                  <div class="dis disAl">
                    <span class="mar-right5" style="color: #FF0000;">*</span>
                    <span>入班日期</span>
                  </div>
                  <div class="dis disAl">
                    <el-date-picker v-model="baobanForm.join_time" style="width: 140px;"
                                    value-format="yyyy-MM-dd"   type="date" />
                  </div>
                </div>
                <div class="hei100 item-p item-w dis disAl disJuB">
                  <div class="dis disAl">
                    <span class="mar-right5" style="color: #FF0000;">*</span>
                    <span>有效期</span>
                  </div>
                  <el-form-item class="mp0" prop="yxq">
                    <el-radio v-model="baobanForm.term" label="0">长期有效</el-radio>
                    <el-radio v-model="baobanForm.term" label="1">设置有效期</el-radio>
                  </el-form-item>
                </div>
              </div>
              <div class="wid100 item-l hei44 mar-bott10 dis disAl ">
                <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                  <div class="dis disAl">
                    <span>参考售价（元）</span>
                  </div>
                  <div class="dis disAl">
                    50
                  </div>
                </div>
                <div class="hei100 item-p item-w dis disAl disJuB" v-if="baobanForm.term=='1'">
                  <div class="dis disAl">
                    <span class="mar-right5" style="color: #FF0000;">*</span>
                    <span>到期日期</span>
                  </div>
                  <el-date-picker v-model="baobanForm.term_time" style="width: 140px;"
                                  value-format="yyyy-MM-dd"    type="date" />
                </div>
              </div>
              <div class="wid100 item-l hei44 mar-bott10 dis disAl ">
                <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                  <div class="dis disAl">
                    <span class="mar-right5" style="color: #FF0000;">*</span>
                    <span>支付方式</span>
                  </div>
                  <el-form-item class="mp0" prop="charge_card_paytype">
                    <el-select v-model="baobanForm.charge_card_paytype" style="width: 140px;" placeholder="请选择"
                               size="small">
                      <el-option v-for="item in paytypelist" :key="item.value" :label="item.label"
                                 :value="item.value" />
                    </el-select>
                  </el-form-item>
                </div>
                <div class="hei100 item-p item-w dis disAl disJuB">
                  <div class="dis disAl">
                    <span class="mar-right5" style="color: #FF0000;">*</span>
                    <span>实收金额（元）</span>
                  </div>
                  <el-form-item class="mp0">
                    <el-input v-model="baobanForm.money" style="width: 140px;"
                              placeholder="请输入金额" />
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </div>
          <div class="wid100 dis disAl disJuC foSi14 coFFF mar-top20" style="padding: 20px 0 40px">
            <div class="mar-right20 que cuPo" @click.stop="submitForm('baobanForm')"
                 style="background: #6b7cdd;">保存</div>
            <div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
          </div>
        </div>
      </el-scrollbar>
    </div>

  </div>
</template>

<script>
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import {
    getLists,
    getInfo,
    getBaoban,
    getClassStatus
  } from '@/api/class';
  import {
    getTelListmember
  } from '@/api/member';
	import {
		getXuan,
		judgeButton
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: 'ClassPrivateList',
		components: {
			Pagination
		},
		data() {
			return {
        classInfo:{},
        nameVisible: false,
        nameList: [],
        namePicture:{},
				list: null,
				total: 0,
				listLoading: false,
				search: {
					stateList: [{
						value: '',
						label: '全部'
					}, {
						value: '1',
						label: '上架'
					}, {
						value: '0',
						label: '下架'
					}], // 状态
					state: '',
					start: '',
					end: '',
					name: ''
				},
				tableData: null,
				listQuery: {
					page: 1,
					limit: 0,
          state: '',
          start: '',
          end: '',
          name: ''
				},
        baoban_isset:false,
        baobanForm: {
          member_id:0,
          term_time:'',
          tel:'',
          charge_card_paytype:0,
          birthday:'',
          realname:'',
          money:0,
          join_time:'',
          class_hour:0,
          term:'0',
          relevance: []
        },
        rules: [],
        paytypelist: [ // 支付方式
          {
            label: '请选择',
            value: 0
          }, {
            label: '商户扫码(微信/支付宝/云闪付)',
            value: 1
          }, {
            label: '用户扫码(收付款)',
            value: 2
          }, {
            label: '现金支付',
            value: 3
          }, {
            label: '储值卡支付',
            value: 4
          }, {
            label: '线下支付(银行卡)',
            value: 5
          }, {
            label: '线下支付(微信)',
            value: 6
          }, {
            label: '线下支付(支付宝)',
            value: 7
          }, {
            label: '线下支付(其他)',
            value: 8
          }
        ],
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '班级管理',
				url: '/course/classPrivateList',
				pd: true
			}, {
				name: '班课课程管理',
				url: '/course/courseTeam',
				pd: true
			}, {
				name: '班课课程表',
				url: '/course/courseSurfaceClass',
				pd: true
			}, {
				name: '班课会员管理',
				url: '/course/classMember',
				pd: true
			}, {
				name: '班课数据统计',
				url: '/course/classPrivateData',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		methods: {
      submitForm(){
        console.log(this.baobanForm);
        if(!this.baobanForm.tel){
          this.$message.error('请填写手机号码')
          return;
        }
        if(!this.baobanForm.realname){
          this.$message.error('请填写姓名')
          return;
        }
        if(this.baobanForm.class_hour == ''){
          this.$message.error('请填写课时')
          return;
        }
        if(!this.baobanForm.join_time){
          this.$message.error('请填写入班日期')
          return;
        }
        if(this.baobanForm.term == '1' && this.baobanForm.term_time == ''){
          this.$message.error('请填写到期日期')
          return;
        }
        if(this.baobanForm.charge_card_paytype == 0){
          this.$message.error('请选择支付方式')
          return;
        }
        var params = {
          'class_id':this.classInfo.id,
          'member_id':this.baobanForm.member_id,
          'member_name':this.baobanForm.realname,
          'member_tel':this.baobanForm.tel,
          'birthday':this.baobanForm.birthday,
          'money':this.baobanForm.money,
          'class_hour':this.baobanForm.class_hour,
          'join_time':this.baobanForm.join_time,
          'term':this.baobanForm.term,
          'term_time':this.baobanForm.term_time,
          'paytype':this.baobanForm.charge_card_paytype,
        };
        getBaoban(params).then(response => {
          const {
            data
          } = response

          if(data.code == 0){
            this.$message.success('成功')
            this.baobanForm.term_time = ''
            this.baobanForm.tel = ''
            this.baobanForm.realname = ''
            this.baobanForm.charge_card_paytype = 0
            this.baobanForm.birthday = ''
            this.baobanForm.money = 0
            this.baobanForm.join_time = ''
            this.baobanForm.class_hour = 0
            this.baobanForm.term = '0'
            this.baobanForm.className = null
            this.baobanForm.courses = null
            this.baobanForm.coachs = null
            this.baobanForm.member_id = 0
            this.baoban_isset = false
          }else{
            this.$message.error(data.msg)
          }
        }).catch(error => {
          console.log(error)
        })
      },
      shuaVisibleClick() {
        this.baobanForm.term_time = ''
        this.baobanForm.tel = ''
        this.baobanForm.realname = ''
        this.baobanForm.charge_card_paytype = 0
        this.baobanForm.birthday = ''
        this.baobanForm.money = 0
        this.baobanForm.join_time = ''
        this.baobanForm.class_hour = 0
        this.baobanForm.term = '0'
        this.baobanForm.className = null
        this.baobanForm.courses = null
        this.baobanForm.coachs = null
        this.baobanForm.member_id = 0
        this.baoban_isset = false
      },
      nameClick(index){
        this.namePicture = this.nameList[index]
        this.baobanForm.realname = this.nameList[index].realname
        this.baobanForm.tel = this.nameList[index].tel
        this.baobanForm.birthday = this.nameList[index].birthday
        this.baobanForm.member_id = this.nameList[index].id
        this.nameVisible = false
      },
      gettel(){
        getTelListmember({ 'tel': this.baobanForm.tel}).then(response => {
          const {
            data
          } = response
          console.log(data)
          this.nameList = data
          this.nameVisible = true

        }).catch(error => {
          console.log(error)
        })
      },
      // 上架下架  status == 1 上架 其他下架
      sxjia(id,status){
        var msg = '';
        if(status === 0){
          msg = '确认上架该班课？';
          status = 1
        }else{
          msg = '确认下架该班课？';
          status = 0
        }
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          getClassStatus({ 'id':id,'status':status }).then(response => {
            const {
              data
            } = response
            console.log(data)

            this.getList()
          }).catch(error => {
            console.log(error)
          })
          // 点击确定进行的操作
        }).catch(() => {
          // 点击取消进行的操作
        });
      },
      baoban(id){
        this.baoban_isset = true
        getInfo({ 'id':id }).then(response => {
          const {
            data
          } = response
          console.log(data)
          this.classInfo = data
        }).catch(error => {
          console.log(error)
        })
      },
			getSuosou(){
				this.listQuery.page = 0
				this.getList()

			},
			xiangqing(id) {
				console.log(id)
				this.$router.push({
					path: '/course/privateParticulars?id=' + id
				})
			},
			edit(id) {
				console.log(id)
				this.$router.push({
					path: '/course/classPrivateEdit?id=' + id
				})
			},
			add() {
				this.$router.push({
					path: '/course/classPrivateAdd'
				})
			},
			getList() {
				this.listLoading = true
				this.total = 0
				this.tableData = []
				this.listLoading = false
        var params = this.listQuery;
        getLists(params).then(response => {
          const {
            data
          } = response
          console.log(data)
          this.tableData = data.data
          this.total = data.total
        }).catch(error => {
          console.log(error)
        })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yh_content {
		padding: 20px;
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20px 20px 0px 20px;
	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.topsearch_item {
		/* padding: 20px; */
	}

	.search_left {
		width: 150px;
		font-size: 12px;
		color: #838383;
	}

	.search_right {
		flex-wrap: wrap;
	}

	.sons {
		margin-left: 20px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.choiceme {
		color: #6b7cdd;
		font-size: 12px;
	}

	.yh_xian {
		border-bottom: 1px solid #e7e7e7;
		/* width: 98%; */
		margin: 0px auto;
		margin-bottom: 20px;
	}

	.yh_qs {
		color: #838383;
	}

	.yh_disJub {
		justify-content: space-between;
	}

	.yh_disJuc {
		justify-content: center;
	}

	.yh_font12 {
		font-size: 12px;
	}

	.yh_font13 {
		font-size: 13px;
	}

	::v-deep .el-input__inner {
		height: 32px;
		line-height: 32px;
	}

  .nameSuo {
    min-width: 138px;
    z-index: 15;
    background: #fff;
    border: 1px solid #d9d9d9;
    top: 35px;
  }

  .suosouText {
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    border-bottom: 1px solid #d9d9d9;
    cursor: pointer;
    white-space: nowrap;
  }
</style>
